<template>
    <div class="app-container">
        <el-form ref="queryForm" size="small" label-width="68px">
            <el-row>
                <el-card shadow="always" style="margin-bottom: 10px;">
                    <el-radio-group v-model="reportType" size="mini">
                        <el-radio border key="51" label="51">年龄区间</el-radio>
                        <el-radio border key="53" label="53">需求额度区间</el-radio>
                        <el-radio border key="54" label="54">本地户籍</el-radio>
                        <el-radio border key="55" label="55">自己放款/扫码放款</el-radio>
                    </el-radio-group>
                </el-card>
            </el-row>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="时间" prop="timeGroup">
                        <el-date-picker v-model="timeGroup" type="daterange" :picker-options="pickerOptions" editable
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
                            value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">

                    <el-form-item label="部门归属" prop="deptId">
                        <treeselect v-model="deptId" :options="deptOptions" :show-count="true" placeholder="请选择部门归属"
                            :default-expand-level="4" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">

            </el-col>
        </el-row>
        <el-table v-loading="loading" :data="custPortraitList">
            <template v-if="reportType == null || reportType == 51">
                <el-table-column label="25以内放款客户量" align="center" prop="un25_loan_count" />
                <el-table-column label="25以内创收金额" align="center" prop="un25_create_amount" />
                <el-table-column label="25以内创收件均" align="center" prop="un25_avg_create_amount" />
                <el-table-column label="25-30放款客户量" align="center" prop="un30_loan_count" />
                <el-table-column label="25-30创收金额" align="center" prop="un30_create_amount" />
                <el-table-column label="25-30创收件均" align="center" prop="un30_avg_create_amount" />
                <el-table-column label="30-40放款客户量" align="center" prop="un40_loan_count" />
                <el-table-column label="30-40创收金额" align="center" prop="un40_create_amount" />
                <el-table-column label="30-40创收件均" align="center" prop="un40_avg_create_amount" />
                <el-table-column label="40-45放款客户量" align="center" prop="un55_loan_count" />
                <el-table-column label="40-45创收金额" align="center" prop="un55_create_amount" />
                <el-table-column label="40-45创收件均" align="center" prop="un55_avg_create_amount" />
                <el-table-column label="55以上放款客户量" align="center" prop="ab55_loan_count" />
                <el-table-column label="55以上创收金额" align="center" prop="ab55_create_amount" />
                <el-table-column label="55以上创收件均" align="center" prop="ab55_avg_create_amount" />
                <el-table-column label="无年龄放款客户量" align="center" prop="null_loan_count" />
                <el-table-column label="无年龄创收金额" align="center" prop="null_create_amount" />
                <el-table-column label="无年龄创收件均" align="center" prop="null_avg_create_amount" />
            </template>

            <template v-if="reportType == null || reportType == 52">
                <el-table-column label="男性放款客户量" align="center" prop="male_loan_count" />
                <el-table-column label="男性创收金额" align="center" prop="male_create_amount" />
                <el-table-column label="男性创收件均" align="center" prop="male_avg_create_amount" />
                <el-table-column label="女性放款客户量" align="center" prop="female_loan_count" />
                <el-table-column label="女性创收金额" align="center" prop="female_create_amount" />
                <el-table-column label="女性创收件均" align="center" prop="female_avg_create_amount" />
                <el-table-column label="无性别放款客户量" align="center" prop="null_loan_count" />
                <el-table-column label="无性别创收金额" align="center" prop="null_create_amount" />
                <el-table-column label="无性别创收件均" align="center" prop="null_avg_create_amount" />
            </template>

            <template v-if="reportType == null || reportType == 53">
                <el-table-column label="5万以内放款客户量" align="center" prop="un5w_loan_count" />
                <el-table-column label="5万以内创收金额" align="center" prop="un5w_create_amount" />
                <el-table-column label="5万以内创收件均" align="center" prop="un5w_avg_create_amount" />
                <el-table-column label="5-20万放款客户量" align="center" prop="un20w_loan_count" />
                <el-table-column label="5-20万创收金额" align="center" prop="un20w_create_amount" />
                <el-table-column label="5-20万创收件均" align="center" prop="un20w_avg_create_amount" />
                <el-table-column label="20-30万放款客户量" align="center" prop="un50w_loan_count" />
                <el-table-column label="20-30万创收金额" align="center" prop="un50w_create_amount" />
                <el-table-column label="20-30万创收件均" align="center" prop="un50w_avg_create_amount" />
                <el-table-column label="50万以上放款客户量" align="center" prop="ab50w_loan_count" />
                <el-table-column label="50万以上创收金额" align="center" prop="ab50w_create_amount" />
                <el-table-column label="50万以上创收件均" align="center" prop="ab50w_avg_create_amount" />
            </template>

            <template v-if="reportType == null || reportType == 54">
                <el-table-column label="本地户籍放款客户量" align="center" prop="local_loan_count" />
                <el-table-column label="本地户籍创收金额" align="center" prop="local_create_amount" />
                <el-table-column label="本地户籍创收件均" align="center" prop="local_avg_create_amount" />
                <el-table-column label="非本地户籍放款客户量" align="center" prop="nolocal_loan_count" />
                <el-table-column label="非本地户籍创收金额" align="center" prop="nolocal_create_amount" />
                <el-table-column label="非本地户籍创收件均" align="center" prop="nolocal_avg_create_amount" />
            </template>

            <template v-if="reportType == null || reportType == 55">
                <el-table-column label="自己放款客户量" align="center" prop="self_loan_count" />
                <el-table-column label="自己放款创收金额" align="center" prop="self_create_amount" />
                <el-table-column label="自己放款创收件均" align="center" prop="self_avg_create_amount" />
                <el-table-column label="扫码放款客户量" align="center" prop="introduce_loan_count" />
                <el-table-column label="扫码放款创收金额" align="center" prop="introduce_create_amount" />
                <el-table-column label="扫码放款创收件均" align="center" prop="introduce_avg_create_amount" />
            </template>
        </el-table>
    </div>
</template>

<script>
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Treeselect from "@riophae/vue-treeselect";
import { childrenAlldeptTree } from "@/api/system/user";
import { getTransactionCustPortraitDatas } from "@/api/crmsys/report/custStatics";

export default {
    name: "TransactionCustPortrait",
    components: { Treeselect },
    data() {
        return {
            reportType: "51",
            loading: false,
            timeGroup: null,
            deptId: null,
            // 部门归属树选项
            deptOptions: [],
            custPortraitList: [],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            }
        }
    },
    watch:{
        reportType(newvalue, oldvalue) {
            this.custPortraitList=[];
        }
    },
    // 生命周期 - 创建完成（访问当前this实例）
    created() {
        this.getDeptTree();

    },
    // 生命周期 - 挂载完成（访问DOM元素）
    mounted() {

    },
    // methods方法
    methods: {
        /** 搜索按钮操作 */
        handleQuery() {
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            // this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 查询部门归属下拉树结构 */
        getDeptTree() {
            var dept = { deptId: this.$store.state.user.deptid }
            childrenAlldeptTree(dept).then(response => {
                this.deptOptions = response.data;
            });
        },
        getList() {

            if(this.timeGroup==null){
                this.$message.error(`请输入申请时间!`);
                return;
            }
            let deptId=this.deptId==null?-1:this.deptId;
            this.loading = true;
            getTransactionCustPortraitDatas(this.timeGroup, this.reportType, deptId).then(
                (response) => {
                    this.custPortraitList = response.rows;
                    this.loading = false;
                }
            );
        }
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/command.scss';
</style>
